<template>
    <div class="">
    <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 提现列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
        	<el-form :inline="true"  class="demo-form-inline">
        		<el-form-item label="手机：">
					<el-input v-model="mobile" @keyup.enter.native="onphonenumber" placeholder="请输入用户手机" clearable style="width:200px;"></el-input>
				</el-form-item>
				<el-form-item label="昵称：">
					<el-input v-model="nick_Name" @keyup.enter.native="onNickname" placeholder="请输入用户昵称" clearable style="width:200px;"></el-input>
				</el-form-item>
				<el-form-item label="提现状态：">
					<el-select style="width:200px" v-model="identityStatus" @change="handleselect" placeholder="提现状态" >
						<el-option 
						v-for="item in optionsPrise"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item> 
				<el-form-item>
					<el-button type="primary" @click="onSelect()">查询</el-button>
				</el-form-item> 
				<el-form-item> 
					<el-button type="warning" @click="StartReset()">重置</el-button>
				</el-form-item>
			</el-form>		
            <div style="height:40px"></div>
			<el-table v-loading="loading" :data="tableData"  style="width: 100%"   ref="multipleTable">
				<el-table-column prop="id" label="订单ID" width="80" align="center">
				</el-table-column>
				<el-table-column prop="transaction_code" label="订单号" width="150" align="center">
				</el-table-column>
				<el-table-column label="用户头像" width="115" align="center">
					<template slot-scope="scope">
						<div><img :src="scope.row.logo" style="width:100px;height:90px"></div>
					</template>
				</el-table-column>
                <el-table-column prop="user_id" label="用户ID" width="100" align="center">
				</el-table-column>
				<el-table-column prop="nick_name" label="用户昵称" width="160" align="center">
				</el-table-column>
				<el-table-column prop="mobile" label="手机号码" width="120" align="center">
				</el-table-column>
				<el-table-column prop="bank_name" label="提现银行" width="130" align="center">
				</el-table-column>
				<el-table-column prop="account_name" label="持卡人姓名" width="120" align="center">
				</el-table-column>
				<el-table-column prop="bank_number" label="银行卡号" width="180" align="center">
				</el-table-column>
                <el-table-column prop="withdrawal_money" label="提现金额" width="120" align="center">
				</el-table-column>
                <el-table-column prop="create_time" label="提现时间" width="155" align="center">
				</el-table-column>
				<el-table-column @click="Cashsuccess(scope.row)" label="操作用户" width="120" align="center">
                    <template   slot-scope="scope">
                        <el-radio-group v-model="scope.row.state" @change="radioGroup">
                            <el-radio v-show="scope.row.state==2||scope.row.state==1" style="margin: 6px 0;" @change="Cashsuccess(scope.row)" :label="2">提现成功</el-radio>
                            <el-radio style="margin: 6px 0;" v-show="scope.row.state==1" @change="Cashwithdrawal(scope.row)" :label="1">提现中</el-radio>
                            <el-radio v-show="scope.row.state==3||scope.row.state==1" style="margin: 6px 0;" @change="Cashfailure(scope.row)" :label="3">提现失败</el-radio>
                        </el-radio-group>
                    </template>
				</el-table-column>
			</el-table>
			<div v-if="paginationShow" class="pagination" v-show="totalPages > 1">
				<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
				</el-pagination>
			</div>
        </div>
    </div>
</template>
<script>
import { GetCashList, CashResult } from '@/api/Cashwithdrawal';

export default {
    name:"Cashwithdrawal",
    data() {
        return {
            pageIndex: 1, // 当前页码
            pageSize: 10, // 每页10条
            totalElements: 1, // 默认总条数
            totalPages: 1, // 默认总页数
            tableData: [], // 表格数据
			identityStatus: '0', // 认证状态
			mobile: '', // 手机号
			nick_Name: '', // 昵称
            loading: true, // 加载状态
            Resultid: 0, // 提现ID
            type: 0,
            paginationShow: true, // 分页器
			User_details: [], // 用户信息
	        optionsPrise: [{
                    value: '0',
                    label: '全部'
                }, {
                    value: '1',
                    label: '提现中'
                }, {
                    value: '2',
                    label: '提现成功'
                }, {
                    value: '3',
                    label: '提现失败'
                }],
	        }
    },
    //实例创建
    created(){
        // 获取提现列表
        this.getList();
    },
    //计算属性
    computed:{
    	
    },
    //方法
    methods: {
        //获取提现列表
        getList(){
        	var param = {
        		state: parseInt(this.identityStatus), // 认证状态
				mobile: this.mobile, // 手机号
				nickName: this.nick_Name, // 昵称
				pageIndex: this.pageIndex, // 页码
				pageSize: this.pageSize // 每页条数
			};
        	GetCashList(param).then( res=> {
                if(res.code == 200){
					var data = res.data; // 当前返回的数据
					data.list.forEach((value, index)=> {
                        var Money = Number(value.withdrawal_money);
                        value.withdrawal_money = Money.toFixed(2);
					});
                    this.tableData = data.list; // 列表数据
					this.loading = false; // 加载状态
                    this.totalElements = data.total; // 总条数
                    this.paginationShow = data.total < 1? false:true; // 分页器 
                    this.totalPages = Math.ceil(data.total / this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: res.msg
                    });
                }
        	})
        },
        //分页
        handleCurrentChange(val){
			this.pageIndex = val;
			this.loading = true; // 加载状态
            this.getList();
        },
        // 状态查询
		handleselect(selVal){
			this.pageIndex = 1;
            this.loading = true; // 加载状态
            this.tableData= []; // 清空
            this.paginationShow = false; // 分页器消失
            this.$nextTick(function () {
                // 分页器重新加载 解决element 分页器的无法触发current-change事件 只限在tabs页 
                this.paginationShow = true;  
            })
            this.getList();
            
		},
		// 手机号回车事件
		onphonenumber() {
			//查询
        	this.onSelect();	
		},
		// 昵称回车事件
		onNickname() {
			//查询
        	this.onSelect();
		},
		// 真实姓名回车事件
		onActualname() {
			//查询
        	this.onSelect();
		},
        //查询
        onSelect(){
			this.pageIndex = 1;
			this.loading = true; // 加载状态
            this.getList();
		},
		// 重置搜索
		StartReset() {
			this.identityStatus = '0'; // 认证状态
			this.mobile = ''; // 手机号
			this.nick_Name = ''; // 昵称
			this.loading = true; // 加载状态
			this.tableData = []; // 清空旧数据
			this.getList(); // 更新列表
        },
        // 提现结果
        PostCashResult(result) {
            var param = {id: this.Resultid, result: result};
            CashResult(param).then( res=> {
                if(res.code == 200){                    
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    this.getList();
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: res.msg
                    });
                }
            });
        },
        // 提现状态
        radioGroup(value) {
            this.PostCashResult(value);
        },
        // 提现成功
        Cashsuccess(value) {
            this.Resultid = value.id;
        },
        // 提现中
        Cashwithdrawal(value) {
            this.Resultid = value.id;
        },
        // 提现失败
        Cashfailure(value) {
            this.Resultid = value.id;
        } 
    }
}
</script>
<style lang="stylus" scoped>
	.edit{
	    color #ff9800;
	}
	.del{
	    color #e51c23;
	}
	.download{
	    color #67C23A;
        margin: 10px 0; 
	}
    .el-radio {
        margin: 6px 0;
    }
</style>


